<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // WebSocet 通信接口：ws://example.com:80/some/path
      // WebSocet 通信模型

      // 1. 拨打电话（建立连接）
      // 注意：wss://echo.websocket.org 是一个在线的测试接口，仅用于 WebSocket 协议通信测试使用
      var ws = new WebSocket("wss://echo.websocket.org");

      // 当连接建立成功，触发 open 事件
      ws.onopen = function(evt) {
        console.log("建立连接成功 ...");

        // 连接建立成功以后，就可以使用这个连接对象通信了
        // send 方法发送数据
        ws.send("Hello WebSockets!");
      };

      //给对方发消息：ws。send()
      //接收对方给你的任何消息：message事件
      //挂断电话：ws.close()

      // 当接收到对方发送的消息的时候，触发 message 事件
      // 我们可以通过回调函数的 evt.data 获取对方发送的数据内容
      ws.onmessage = function(evt) {
        console.log("接收到消息: " + evt.data);

        // 当不需要通信的时候，可以手动的关闭连接
        // ws.close();
      };

      // 当连接断开的时候触发 close 事件
      ws.onclose = function(evt) {
        console.log("连接已关闭.");
      };
    </script>
  </body>
</html>